<template>
    <div>
        <div class="flex row" style="margin-bottom:20px">
            <el-button type="danger" round @click="addMoulage()"><i class="el-icon-plus"></i>新建企业印章</el-button>

            <el-button type="danger" round @click="addCustomseal()"><i class="el-icon-plus"></i>新建自定义印章</el-button>
        </div>

        <el-table :data="tableData" border style="width: 100%"  ref="multipleTable" >
            <el-table-column prop="sealName" label="印章名称" width=""></el-table-column>

            <el-table-column prop="Staff_Name" label="创建人" width=""></el-table-column>

            <el-table-column label="图片" width="">
                <template slot-scope="scope" >
                   <img :src="'/yongxu' + scope.row.imgPath" width="100" height="100" v-if="scope.row.type == 2">

                   <div style="width:100px;height:100px;" v-if="scope.row.type == 1"></div>
                </template>
                
            </el-table-column>

            <el-table-column prop="time" label="创建时间" width=""></el-table-column>
            
            <el-table-column  label="操作" width="110">
                <template slot-scope="scope">
                    <div class="flex row" style="justify-content: space-between;display: flex;">
                    <div style="justify-content: space-between;display: flex;"> 
                        <p  @click.stop="del(scope.row.Id)" style="cursor:pointer;color:red;">
                        删除
                        </p>
                    </div>
                    </div>
                </template>
            </el-table-column>

        </el-table>

        <div class="block flex">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[20,50,100]" :page-size="numPage"  layout="total, sizes, prev, pager, next, jumper" :total="total1">
            </el-pagination>
        </div>


        <el-dialog  :visible.sync="dialogFormVisible1" :append-to-body='true' top="300px" width="800px"> 
                <div class="dialogFormVisible_box">

                    <div class="flex row margin_t">
                        <p class="flex_title">印章名称</p>
                    
                        <input type="text" class="this_input" v-model="sealName">
                    
                    </div>

                    <div class="flex row margin_t">
                        <p class="flex_title">印章类型</p>
                    
                       <el-radio-group v-model="styleType" style="margin-top:15px;">
                          <el-radio :label="1">常规圆章，视觉效果最佳为<=32字</el-radio>
                          <el-radio :label="2">椭圆章，视觉效果最佳为<=18字</el-radio>
                          
                        </el-radio-group>
                    
                    </div>
                    

                    <div class="flex row margin_t">
                        <p class="flex_title">印章文案</p>
                    
                        <input type="text" class="this_input" v-model="textContent" placeholder="长度<= 12字符，  长度建议控制在10个字以内，视觉效果最佳为7个字，避免使用英文字母">
                    
                    </div>

                    <div class="flex row margin_t">
                        <p class="flex_title">防伪码</p>
                    
                        <input type="text" class="this_input" v-model="keyContent" placeholder="长度13位纯数字">
                    
                    </div>

                    <div class="flex row margin_t">
                        <p class="flex_title">字体颜色</p>
                    
                       <el-radio-group v-model="colorinfo" style="margin-top:15px;">
                          <el-radio label="C1">红色</el-radio>
                          <el-radio label="C2">蓝色</el-radio>
                          <el-radio label="C3">黑色</el-radio>
                        </el-radio-group>
                    
                    </div>

                    <div class="flex row margin_t">
                        <p class="flex_title">mode印章模式</p>
                    
                       <el-radio-group v-model="mode" style="margin-top:15px;">
                          <el-radio label="0">常规</el-radio>
                          <el-radio label="1">透明</el-radio>
                          <el-radio label="2">脱敏处理</el-radio>
                          
                        </el-radio-group>
                    
                    </div>
                    

                </div>
        
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="addpartyName()">确 定</el-button>
                </div>

                <div slot="title" class="dialog-title">
                <div class="dialogFormVisivleHeader_left flex">添加企业印章</div>
                
            </div>
        </el-dialog>


        <el-dialog  :visible.sync="dialogFormVisible2" :append-to-body='true' top="300px" width="800px"> 
                <div class="dialogFormVisible_box">

                    <div class="flex row margin_t">
                        <p class="flex_title">印章名称</p>
                    
                        <input type="text" class="this_input" v-model="sealName2">
                    
                    </div>
                    
                    <div class="flex row margin_t">
                        <p class="flex_title">印章图片</p>
                    
                        <el-upload
                            class="upload-demo"
                            action="/yongxu/Base/uploadsealFile"
                            :on-preview="handlePreview"
                            :on-success="successFile"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="3"
                            :on-exceed="handleExceed"
                            :file-list="fileList">
                            <el-button size="small" type="primary">点击上传</el-button>
                            
                        </el-upload>
                    
                    </div>

                    

                </div>
        
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="addpartyName2()">确 定</el-button>
                </div>

                <div slot="title" class="dialog-title">
                <div class="dialogFormVisivleHeader_left flex">添加自定义印章</div>
                
            </div>
        </el-dialog>

    </div>
</template>
<script>
import qs from 'qs';
export default {
    props: {
      className: {
        type: String,
        default: 'echartDiv'
      },
      id: {
        type: String,
        default: 'yourID'
      },
      width: {
        type: String,
        default: '850px'
      },
      height: {
        type: String,
        default: '500px'
      }
    },
    data(){
        return{
            tableData:[],
            numPage:20,
            currentPage:1,
            total1:0,

            urlid:'',

            dialogFormVisible1:false,
            textContent:'',
            keyContent:'',
            sealName:'',
            styleType:1,
            colorinfo:"C1",
            mode:"0",

            File_Name:'',
            
            dialogFormVisible2:false,
            fileList: [],

            sealName2:'',

            fileName:''

            

        }
    },
    created(){
        this.urlid = this.$route.query.id
        this.userinfo(this.urlid)
        
    },
    mounted(){
      
      
    },
    beforeDestroy() {
         
    },
    methods:{
        successFile(res,file){
            if(res.code == 200){
                this.fileName = res.imgPath  
            } 
        },
      addpartyName2(){
          this.$http.post('/yongxu/Signatures/addCustomseal',qs.stringify({
              Id:this.urlid,
              imgPath:this.fileName,
              sealName:this.sealName2,
              userId:localStorage.getItem('userId'),
          })).then((res)=>{
              if(res.data.sign == 200){
                   this.$message({
                        message:res.data.msg,
                        type:'success'
                    });
                    this.sealName2 = ''
                    this.fileName =''
                    this.dialogFormVisible2 = false
                    this.userinfo(this.urlid)
               }else{
                   this.$message({
                        message:res.data.msg,
                        type:'warning'
                    });
               }
              
          }).catch((err)=>{
              this.$message({
                  message:'服务器异常',
                  type:'warning'
              });
          })
      },
      addpartyName(){
          this.$http.post('/yongxu/Signatures/addcompanyMoulage',qs.stringify({
              Id:this.urlid,
              styleType: this.styleType,
              textContent:this.textContent,

              keyContent:this.keyContent,
              color: this.colorinfo,
              mode:this.mode,

              sealName:this.sealName,
              userId:localStorage.getItem('userId'),
          })).then((res)=>{
              if(res.data.sign == 200){
                   this.$message({
                        message:res.data.msg,
                        type:'success'
                    });
                    this.dialogFormVisible1 = false
                    this.textContent = '',
                    this.keyContent='',
                    this.sealName='',
                    this.styleType=1,
                    this.colorinfo="C1",
                    this.mode="0"
                    this.userinfo(this.urlid)
               }else{
                   this.$message({
                        message:res.data.msg,
                        type:'warning'
                    });
               }
              
          }).catch((err)=>{
              this.$message({
                  message:'服务器异常',
                  type:'warning'
              });
          })
      },
      addMoulage(){
          this.dialogFormVisible1 = true
      },
      userinfo(id){
          this.$http.post('/yongxu/Signatures/getCustomseal',qs.stringify({
                Display_Page_Number: this.numPage,
                PageNumber: this.currentPage,
                enterpriseId:id
            })).then((res)=>{
               this.tableData = res.data.mapList
                
            }).catch((err)=>{
                this.$message({
                    message:'服务器异常',
                    type:'warning'
                });
            })
      },

      handleSizeChange:function(val) {
         this.numPage = val
         this.userinfo(this.urlid)
      },
       handleCurrentChange:function(val) {
        this.currentPage = val
        this.userinfo(this.urlid)
      },
      del(id){
          this.$confirm('此操作将删除此印章, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              this.$http.post('/yongxu/Signatures/delSeal',qs.stringify({
                  Id:id
              })).then((res)=>{
                  if(res.data.sign == 200){
                    this.$message({
                      message:res.data.msg,
                      type:'success'
                    });
                    this.userinfo(this.urlid)
                  }else{
                    this.$message({
                      message:res.data.msg,
                      type:'warning'
                    });
                  }
                  
              }).catch((err)=>{
                  this.$message({
                      message:'服务器异常',
                      type:'warning'
                  });
              })
          })
          
      },
      addCustomseal(){
          this.dialogFormVisible2 = true
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }


    } 
}
</script>
<style>

.case-child-end2{
  margin-bottom:20px;
}
.upload-demo{
    width: 500px;
}
.upload-demo .el-upload{
    text-align: left;
    height: 0;
}
</style>


